<template>
  <el-main>
    <!---->
    <div style="text-align: center">
      <el-form :model="queryForm" :inline="true" ref="user">
        <el-form-item label="购票者身份证" prop="Id"
                      :rule="[{required: true , message: '必要信息不能为空'}]">
          <el-input
            v-model="queryForm.cardId"
            placeholder="请输入购票者身份证"
            @input="change($event)"
            clearable
          >

          </el-input>
        </el-form-item>
        <el-button type="danger" icon="el-icon-search" @click="search">查询</el-button>

      </el-form>



    </div>

    <div class="container mar-bottom-30" v-if="Ticket.length>0">
      <el-table
        :data="Ticket"
        style="width: 100%">
        <el-table-column
          prop="cardId"
          label="身份证号"
          width="180">
        </el-table-column>

        <el-table-column
          prop="ticketId"
          label="机票号"
          width="180">
        </el-table-column>

        <el-table-column
          prop="seatId"
          label="座位号"
          width="180">
        </el-table-column>

        <el-table-column
          prop="departureTime"
          label="起飞时间"
          width="180">
        </el-table-column>

        <el-table-column
          prop="boardTime"
          label="登机时间"
          width="180">
        </el-table-column>




      </el-table>

    </div>
  </el-main>


</template>

<script>
export default {
  name: 'queryTicket',
  data() {
    return {
      name: '',
      input: '',
      Usera: {
        TicketId:'123',//票id
        flightId:'123',
        SeatId:'15',
        deTime:'16',//起飞时间
        boTime:'17',//降落时间
        CardId:'14'//身份证id
      },
      queryForm:{
        srcCity:null,
        dstCity:null,
        startTime:null,
        cardId:null
      },
      Ticket:[],
      msg: '购票者姓名不能为空！'
    }
  },
  created() {
    const _this = this
    this.$axios.post('http://localhost:8181/ticket/getTickets',this.queryForm)
      .then((res)=>{
        _this.Ticket = res.data
        console.log(_this.Ticket)
      })
  },
  methods: {
    change() {
      this.$forceUpdate()
    },
    getTicket(formName) {

    },
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) =>{
        if(valid){
          this.$axios.post('http://localhost:8181/ticket/getTickets',this.queryForm)
          .then(function (resp){
            _this.Ticket=resp.data
          })
        }
      })

    },
    edit(){

    },

    search(){
      const _this = this
      this.$axios.post('http://localhost:8181/ticket/queryTicketByCardId',this.queryForm)
        .then((res)=>{
          _this.Ticket = res.data
          if(_this.Ticket.length() >0) {
            _this.$message.success("获取成功")
            _this.Ticket=res.data
          }else{
            _this.$message.error("获取失败")
          }
        })
    }

  }
}
</script>

<style>

</style>
